<template>
  <div>
    <div>
      <!-- <a-select
        mode="multiple"
        :open="false"
        v-model="userText"
        @change="handleChange"
        style="width: 430px"
      />
      <a-button type="primary" @click="select" style="margin-left: 5px;">选择</a-button> -->

      <a-input-search v-model="userText" style="width: 288px" placeholder="昵称/ID" @search="select">
        <a-button slot="enterButton"> 选择 </a-button>
      </a-input-search>
    </div>
    <a-modal title="用户选择" style="width: 300px" v-model="visible" @ok="handleConfirm">
      <div class="table-page-search-wrapper" v-if="true">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="16" :sm="24">
              <a-form-item label="昵称">
                <a-input v-model="queryParam.keyword" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button @click="$refs.table.refresh(true)" type="primary">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowSelection="rowSelection"
        showPagination="auto"
      >
        <span slot="baseinfo" slot-scope="text, record">
          <img style="width: 20px; heigth: 20px" :src="record.avatar" />
          <span :length="20" tooltip>{{ record.name }} </span>
        </span>
      </s-table>
    </a-modal>
  </div>
</template>

<script>
import storage from 'store'
import { STable } from '@/components'
import { getSelectUserList } from '@/api/user'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户信息',
    scopedSlots: { customRender: 'baseinfo' },
  },
]

export default {
  name: 'SelectUser',
  components: {
    STable,
  },
  props: {
    dataType: {
      type: String,
      default: 'single',
    },
    defaultUser: {
      type: Array,
      default: function () {
        return []
      },
    },
    returnType: {
      type: String,
      default: 'id',
    },
    selectType: {
      type: String,
      default: 'user',
    },
  },
  data() {
    return {
      returnUserInfo: [],
      columns,
      userText: [],
      userId: [],
      userTextTrans: [],
      userIdTrans: [],
      visible: false,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.queryParam.store_id = storage.get('storeId') || 1
        Object.assign(parameter, this.queryParam)
        return getSelectUserList(parameter).then((res) => {
          return res.data
        })
      },
    }
  },
  computed: {
    rowSelection: {
      get() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        }
      },
      set(v) {
        return {
          selectedRowKeys: v,
          onChange: v,
        }
      },
    },
  },
  watch: {},
  created() {
    this.userText = this.defaultUser
    this.queryParam.type = this.selectType
  },
  mounted() {},
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.userTextTrans = []
      this.userIdTrans = []
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      // if (this.dataType === 'single') {
      //   for (var m = 0; m < selectedRows.length; m++) {
      //     this.userTextTrans.push(selectedRows[m].nickname)
      //     this.userIdTrans.push(selectedRows[m].id)
      //   }
      //   console.log(this.userTextTrans)
      //   console.log(this.userIdTrans)
      //   this.userText = this.unique(this.userTextTrans).pop()
      //   this.userId = this.unique(this.userIdTrans).pop()
      // } else {
      //   for (var i = 0; i < this.selectedRows.length; i++) {
      //     this.userTextTrans.push(this.selectedRows[i].nickname)
      //     this.userIdTrans.push(this.selectedRows[i].id)
      //   }
      //   this.userText = this.unique(this.userTextTrans)
      //   this.userId = this.unique(this.userIdTrans)
      // }
      // this.$emit('setUid', this.userId)
    },
    handleConfirm() {
      this.userTextTrans = []
      this.userIdTrans = []
      this.returnUserInfo = []
      if (this.dataType === 'single') {
        for (var m = 0; m < this.selectedRows.length; m++) {
          this.userTextTrans.push(this.selectedRows[m].nickname)
          this.userIdTrans.push(this.selectedRows[m].id)
          this.returnUserInfo.push(this.selectedRows[m])
        }
        this.userText = this.unique(this.userTextTrans).pop()
        this.userId = this.unique(this.userIdTrans).pop()
        if (this.userId instanceof Array && this.userId.length < 1) {
          this.$emit('userInfo', 0)
        } else {
          if (this.returnType !== 'id') {
            this.$emit('userInfo', this.returnUserInfo)
          } else {
            this.$emit('userInfo', this.userId)
          }
        }
      } else {
        for (var i = 0; i < this.selectedRows.length; i++) {
          this.userTextTrans.push(this.selectedRows[i].nickname)
          this.userIdTrans.push(this.selectedRows[i].id)
          this.returnUserInfo.push(this.selectedRows[i])
        }
        this.userText = this.unique(this.userTextTrans)
        this.userId = this.unique(this.userIdTrans)
        if (this.returnType !== 'id') {
          this.$emit('userInfo', this.returnUserInfo)
        } else {
          this.$emit('userInfo', this.userId)
        }
      }
      this.visible = false
    },
    unique(arr) {
      return Array.from(new Set(arr))
    },
    select() {
      this.userTextTrans = []
      this.userIdTrans = []
      this.returnUserInfo = []
      this.visible = true
    },
    handleChange(value) {
      var uid = []
      var returnInfo = []
      for (var i = 0; i < this.selectedRows.length; i++) {
        for (var j = 0; j < value.length; j++) {
          if (this.selectedRows[i].nickname === value[j]) {
            uid.push(this.selectedRows[i].id)
            returnInfo.push(this.selectedRows[i])
          }
        }
      }
      this.userId = uid
      this.returnUserInfo = returnInfo
      if (this.dataType === 'single') {
        if (this.userId instanceof Array && this.userId.length < 1) {
          this.$emit('userInfo', 0)
        } else {
          if (this.returnType !== 'id') {
            this.$emit('userInfo', this.returnUserInfo)
          } else {
            this.$emit('userInfo', this.userId)
          }
        }
      } else {
        if (this.returnType !== 'id') {
          this.$emit('userInfo', this.returnUserInfo)
        } else {
          this.$emit('userInfo', this.userId)
        }
      }
    },
  },
}
</script>
